<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>手势滑动</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: olivedrab;
                transform: translate(0px, 0px);
                margin: 0 auto;
                /* 阻止浏览器默认行为 */
                touch-action: none;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        function move(obj) {
            // 手指点击初始坐标
            const Pointerstart = {
                x: 0,
                y: 0,
            };
            // 手指点击结束坐标
            const PointerEnd = {
                x: 0,
                y: 0,
            };
            // 移动长度
            const movelength = {
                x: 0,
                y: 0,
            };
            // 定义开始时间和结束时间变量
            var startTime, endTime;
            // 触摸事件
            obj.onpointerdown = function (ev) {
                Pointerstart.x = ev.pageX;
                Pointerstart.y = ev.pageY;
                startTime = new Date().getTime();
                document.onpointermove = function (ev) {
                    movelength.x = ev.pageX - Pointerstart.x;
                    movelength.y = ev.pageY - Pointerstart.y;
                };
            };
            function derection(){
                endTime = new Date().getTime();
                if (endTime - startTime >= 500 || (Math.abs(movelength.x) <= 100 && Math.abs(movelength.y) <= 100)) {
                    console.log("滑动失败：",endTime - startTime,Math.abs(movelength.x),Math.abs(movelength.y));
                    return false;
                } else {
                    console.log("滑动：",endTime - startTime,Math.abs(movelength.x),Math.abs(movelength.y));
                    if (Math.abs(movelength.x) > Math.abs(movelength.y)) {
                        if (movelength.x > 0) {
                            return "右滑动";
                            // alert("右滑动")
                        } else {
                            return "左滑动";
                            // alert("左滑动")
                        }
                    } else {
                        if (movelength.y > 0) {
                            return "下滑动";
                            // alert("下滑动")
                        } else {
                            return "上滑动";
                            // alert("上滑动")
                        }
                    }
                }

            }
            document.onpointerup = function (ev) {
                // 因为上面指针移动的进程是在点击后就开始了，如果不主动关闭，其移动的执行程序是一直在的，需要解绑
                console.log(derection());
                document.onpointermove = null;
            };
            //有手机弹框提示时触发，必须处于移动端环境下
            obj.onpointercancel = function (ev) {
                console.log("弹框：",derection());
                document.onpointermove = null;
            };
        }
        // 获取元素对象
        var div1 = document.querySelector("div");
        // 给指定函数赋予函数特性
        move(div1);
    </script>
</html>
